<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>新闻动态</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
		<link href="../../css/news_list/index.css" rel="stylesheet" />
		<script src="../../js/statistics.js"></script>
		<style>
			/*.mui-bar-nav~.mui-content{
				padding-top:40px;
			}*/

			.noadd{
				color:#999;
				text-align:center;
				height:40px;
				line-height:40px;
				font-size:13px;
			}
			.header{
				background: #43ac45;
			}
			.header h1{
				color:#fff;
				font-size:18px;
			}
			.no{
				width: 50%;
    			margin-left: 25%;
    			margin-top: 30%;
			}
			.mui-table-view-chevron .mui-table-view-cell{
				padding-right:15px;
			}
			.mui-scroll{
				min-height:100vh;
				background: #f2f2f2;
			}


			#no{
				background: url(../../images/my/index/null.png) no-repeat 50% 55%;
				background-size: 44%;
				/*margin: 0 28%;*/
				min-height:100vh;
				width:100%;
				position: absolute;z-index: 10;
				/*overflow-x: hidden;*/
			}

		</style>
	</head>

	<body>
		<div class="mui-content  mui-scroll-wrapper" id="pullrefresh">
			<div class='mui-scroll'>
				<ul class="mui-table-view mui-table-view-chevron" id='load_list'>
				<!--新闻列表-->
					<!---->
					<!--<li class="mui-table-view-cell" >-->
					<!--<div style='overflow: auto;display:inline-block;'>-->
						<!--<img class="left list_left" src="../../images/city/logo1_1@2x.png" alt="" />-->
					<!--</div>-->
					<!--<div class="list_right">-->
						<!--<h3>jQuery下实现等待指定元素加载完毕(可改成纯js版)是可以改正的下实现等待指定元下实现等待指定元,下实现等待指定元素加载完毕(可改成纯js版)是可以改正的下实现等待指定元下实现等待指定元,下实现等待指定元素加载完毕(可改成纯js版)是可以改正的下实现等待指定元下实现等待指定元</h3>-->
					<!--</div>-->
					<!--<div class='list_rightB' style='float:right;margin-top:-21px;'>-->
						<!--<p class="clear" style='display:block;overflow: hidden;'>-->
							<!--<span class='left'>10</span>-->
							<!--<span class='right'>2017-10-01</span>-->
						<!--</p>-->
					<!--</div>-->
				<!--</li>-->
					<!--<li class="mui-table-view-cell" >-->
						<!--<div style='overflow: auto;display:inline-block;'>-->
							<!--<img class="left list_left" src="../../images/city/logo1_1@2x.png" alt="" />-->
						<!--</div>-->
						<!--<div class="list_right">-->
							<!--<h3>jQuery下(可改成纯js版)是可以改正的</h3>-->
						<!--</div>-->
						<!--<div class='list_rightB' style='float:right;margin-top:-21px;'>-->
								<!--<p class="clear" style='display:block;overflow: hidden;'>-->
									<!--<span class='left'>10</span>-->
									<!--<span class='right'>2017-10-01</span>-->
								<!--</p>-->
					<!--</div>-->
					<!--</li>-->
				
				</ul>
				<!--<div class='noadd'></div>-->
			</div>	
			<!--<img class='no' src="../../images/icon/news_list/no.png" alt="" style='display:none;'/>-->
		</div>
		<p id="no" style="display:none;text-align:center;"></p>


		<script src='../../plugins/template/template.js'></script>
		<script src='../../plugins/jquery/jquery-3.1.0.min.js'></script>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script src="../../js/fontset.js"></script>
		<script src="../../js/md5.js"></script>
		<script src="../../js/getApiToken.js" type="text/javascript" charset="utf-8"></script>
		<!--<script type="text/javascript" src="../../js/judge.js" ></script>-->
		<!--<script type="text/javascript" src='../../js/news_list/index.js'></script>-->
		<script id="item" type="text/html">
	    	{{each data as value i}}
				<li class="mui-table-view-cell" id="{{value.id}}">
					<div style='overflow: auto;display:inline-block;'>
						<img class="left list_left" src="{{baseUrl}}{{value.path}}" alt="" />
					</div>
					<div class="list_right">
						<h3>{{value.title}}</h3>
						
					</div>
					<div class='list_rightB' style='float:right;margin-top:-21px;'>
						<p class="clear" style='display:block;'>
							<span class='left'>{{value.views}}</span>
							<span class='right'>{{value.date}}</span>
						</p>
					</div>
				</li>
	    	{{/each}}
		</script>
		<script>
			var page_cnt =12,
				li_list,
				date_time,//二次加载时间
				is_com,//二次加载的条件
				data_list,
				shareimg;//微信所需图片
			mui.init({
				pullRefresh:{
					container:'#pullrefresh',
					down : {
			     	//height:50,//可选,默认50.触发下拉刷新拖动距离,
						auto: false,//可选,默认false.自动下拉刷新一次
						contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
						contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
						contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
						callback:pulldownRefresh
					},
					up:{
						contentrefresh:'正在加载...',
						contentnomore:'没有更多数据了',
						callback:pullupRefresh
					}
				}
			});
			//数据列表
			mui.plusReady(function() {
				console.log('zheshisgfkrdehgklrhsryurisotlj');
				
				//页面跳转
				$('#load_list').on('tap', 'li', function(e) {
					var detail_id = $(this).attr('id');
					console.log(detail_id+'列表的id');
					
					//获取点击的新闻左侧图片
					shareimg=$(this).find('img').attr('src');
					console.log(shareimg+'微信所需图片');
					
//					console.log($(this).find('img').attr('src').width+'-----图片宽度');
//					console.log($(this).find('img').attr('src').height+'-----图片高度');
					
					
					var theImage = new Image();
					theImage.src = $(this).find('img').attr('src');
					
					// Get accurate measurements from that.
					var imageWidth = theImage.width;
					var imageHeight = theImage.height;
//					console.log(imageWidth+'-------宽度');
//					console.log(imageHeight+"------高度");
					
					
					
					
					var user_id = plus.storage.getItem('cg_user_id'),
						user_token = plus.storage.getItem('cg_user_token');
					console.log(user_token+'这是用户的');
					mui.openWindow({
						url: 'detail.html',
						extras: {
							'detail_id': detail_id,
							//详情页获取图片
							'shareimg':shareimg
						}
					})
					pulldownRefresh()
				})
				//列表ajax
				myAjax(
					'news/news/getNewsList','get',
					{
						'page_cnt': page_cnt,
						'is_recommend':1
					}, function(data) {
						console.log(JSON.stringify(data));
						console.log(data.data.length+'sddddddd');
						if(data.success){
							li_list={
			                    data:data.data,
			                    baseUrl:_baseUrl
			                };
							var li_item = template('item', li_list);
							$("#load_list").append(li_item)
							date_time=data.update_time;
							is_com=data.is_recommend;
//							//判断title长度						
//							for(var i=0;i<data.data.length;i++){
//								console.log(data.data[i].title.length>30);
//								if(data.data[i].title.length>30){
//									data.data[i].title=data.data[i].title.substring(0,30)+"***";
//								}
//								console.log(data.data[i].title);
//								var tit=data.data[i].title;
//						
//							}

							if(data.data==''){
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
								$('#no').css('display','block');
							}
							else if(data.data.length<page_cnt){
								mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
								$('#no').css('display','none');
//								$('.noadd').html('已加载全部~');
							}else{
								mui('#pullrefresh').pullRefresh().refresh(true);
								$('#no').css('display','none');
							}
						}
					}
				)
			})
		//下拉刷新
		function pulldownRefresh(){
			myAjax('news/news/getNewsList','get',
				{
					'is_recommend':1,
					'page_cnt':page_cnt
				},function(data){
					console.log('可以上拉刷新');
					console.log(JSON.stringify(data));
					if(data.success){
						li_list={
		                    data:data.data,
		                    baseUrl:_baseUrl
		                };
						var li_item = template('item', li_list);
						$("#load_list").html(li_item);
						date_time=data.update_time;
						is_com=data.is_recommend;
						setTimeout( function() {
							mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
							mui('#pullrefresh').pullRefresh().refresh(true);
						}, 1500);		
					}
				}
			)
		}	
		//上拉加载
		function pullupRefresh(){
			console.log('可以');
			myAjax('news/news/getNewsList','get',
				{
					'page_cnt':page_cnt,
					'is_recommend':is_com,
					'update_time':date_time
				},function(data){
					console.log(page_cnt);
					console.log(data.data.length);
					console.log(JSON.stringify(data));
					if(data.success){
						 pre_list={
		                    data:data.data,
		                    baseUrl:_baseUrl
		                };
						var pre_item=template('item',pre_list);
						$('#load_list').append(pre_item);
						//终止刷新状态
						setTimeout( function() {
							if(data.data.length<page_cnt){
//								$('.noadd').html('已加载全部~');
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
							
							}else{
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
							}
						}, 1500);
					}
				}
			)
		}		
		</script>
	</body>
</html>